<!DOCTYPE html>
<html>
<head>
<!-- vuetify -->
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <title>MyPetstoreForMerchant</title>
</head>
<body>
  <div id="app">
    <template>
      <v-app>
        <!-- 导航栏 -->
        <v-app-bar app color="primary" dark>
          <v-app-bar-nav-icon @click="toggleDrawer"></v-app-bar-nav-icon>
          <v-toolbar-title>商家管理系统</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon>
            <v-icon>mdi-magnify</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-bell</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-account</v-icon>
          </v-btn>
        </v-app-bar>
    
        <!-- 侧边栏 -->
        <v-navigation-drawer v-model="sideDrawer" app>
          <v-sheet color="grey lighten-4" class="pa-4">
            <v-avatar class="mb-4" color="grey darken-1" size="64">
              <img src="../images/cutecat.jpg" alt="icon">
            </v-avatar>
            <div>lapu2023@outlook.com</div>
          </v-sheet>
          <v-divider></v-divider>
          <v-list>
            <v-list-item 
              v-for="item in sideDrawerlinks" 
              :key="item.icon" 
              link 
              :href="item.url"
            >
            <a :href="item.url" style="text-decoration: none; color: inherit; width: 100%; display: flex;">
              <v-list-item-icon>
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ item.text }}</v-list-item-title>
              </v-list-item-content>
            </a>
            </v-list-item>
            <v-list-item link>
              <v-list-item-icon>
                <v-icon>mdi-cog</v-icon>
              </v-list-item-icon>
              <v-list-item-content @click="settingDialog = true">
                <v-list-item-title >设置</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-navigation-drawer>
    
        <!-- 主体内容 -->
        <v-main>
          <v-container class="py-8 px-6" fluid>
            <v-row>
              <v-col cols="12">
                <!-- 表格 -->
                <template>
                  <v-data-table
                          :headers="headers"
                          :items="Items"
                          :search="search"
                          class="elevation-1"
                  >
                    <!-- 表头-->
                    <template v-slot:top>
                      <v-toolbar
                              flat
                      >
                        <v-toolbar-title>宠物管理</v-toolbar-title>
                        <v-divider
                                class="mx-4"
                                inset
                                vertical
                        ></v-divider>
                        <v-spacer></v-spacer>
                        <v-dialog
                                v-model="dialog"
                                max-width="500px"
                        >
                          <template v-slot:activator="{ on, attrs }">
                            <v-btn
                                    color="primary"
                                    dark
                                    class="mb-2"
                                    v-bind="attrs"
                                    v-on="on"
                            >
                              新建宠物
                            </v-btn>
                          </template>

                          <v-card>
                            <v-card-title>
                              <span class="text-h5">{{ formTitle }}</span>
                            </v-card-title>
                            <!-- 编辑卡片 -->
                            <v-card-text>
                              <v-container>
                                <v-row>
                                  <v-col
                                          cols="12"
                                          sm="6"
                                          md="4"
                                  >
                                    <v-text-field
                                            v-model="editedItem.itemid"
                                            label="Itemid"
                                    ></v-text-field>
                                  </v-col>
                                  <v-col
                                          cols="12"
                                          sm="6"
                                          md="4"
                                  >
                                    <v-text-field
                                            v-model="editedItem.productid"
                                            label="Productid"
                                    ></v-text-field>
                                  </v-col>
                                  <v-col
                                          cols="12"
                                          sm="6"
                                          md="4"
                                  >
                                    <v-text-field
                                            v-model="editedItem.listprice"
                                            label="Listprice"
                                    ></v-text-field>
                                  </v-col>
                                  <v-col
                                          cols="12"
                                          sm="6"
                                          md="4"
                                  >
                                    <v-text-field
                                            v-model="editedItem.unitcost"
                                            label="Unitcost"
                                    ></v-text-field>
                                  </v-col>
                                  <v-col
                                          cols="12"
                                          sm="6"
                                          md="4"
                                  >
                                    <v-text-field
                                            v-model="editedItem.attr1"
                                            label="Attr1"
                                    ></v-text-field>
                                  </v-col>
                                  <v-col
                                          cols="12"
                                          sm="6"
                                          md="4"
                                  >
                                    <v-text-field
                                            v-model="editedItem.attr2"
                                            label="Attr2"
                                    ></v-text-field>
                                  </v-col>
                                  <v-col
                                          cols="12"
                                          sm="6"
                                          md="4"
                                  >
                                    <v-text-field
                                            v-model="editedItem.attr3"
                                            label="Attr3"
                                    ></v-text-field>
                                  </v-col>
                                  <v-col
                                          cols="12"
                                          sm="6"
                                          md="4"
                                  >
                                    <v-text-field
                                            v-model="editedItem.attr4"
                                            label="Attr4"
                                    ></v-text-field>
                                  </v-col>
                                  <v-col
                                          cols="12"
                                          sm="6"
                                          md="4"
                                  >
                                    <v-text-field
                                            v-model="editedItem.attr5"
                                            label="Attr5"
                                    ></v-text-field>
                                  </v-col>
                                  <v-col
                                          cols="12"
                                          sm="6"
                                          md="4"
                                  >
                                    <v-radio-group
                                            v-model="editedItem.uploaded"
                                            mandatory
                                    >
                                      <v-radio
                                              label="上架"
                                              value=1
                                      ></v-radio>
                                      <v-radio
                                              label="下架"
                                              value=0
                                      ></v-radio>
                                    </v-radio-group>
                                  </v-col>
                                </v-row>
                              </v-container>
                            </v-card-text>

                            <v-card-actions>
                              <v-spacer></v-spacer>
                              <v-btn
                                      color="blue darken-1"
                                      text
                                      @click="close"
                              >
                                Cancel
                              </v-btn>
                              <v-btn
                                      color="blue darken-1"
                                      text
                                      @click="save"
                              >
                                Save
                              </v-btn>
                            </v-card-actions>
                          </v-card>
                        </v-dialog>
                        <!--重置对话框-->
                        <v-dialog
                                v-model="resetDialog"
                                max-width="290">
                          <v-card>
                            <v-card-title class="text-h5">
                              确定重置密码？
                            </v-card-title>

                            <v-card-text>
                              重置密码后，默认密码为1234
                            </v-card-text>

                            <v-card-actions>
                              <v-spacer></v-spacer>

                              <v-btn
                                      color="green darken-1"
                                      text
                                      @click="resetDialog = false"
                              >
                                No
                              </v-btn>

                              <v-btn
                                      color="red darken-1"
                                      text
                                      @click="resetPassword"
                              >
                                Yes
                              </v-btn>
                            </v-card-actions>
                          </v-card>
                        </v-dialog>
                        <!--消息条-->
                        <v-snackbar
                                v-model="snackbar"
                        >
                          {{ text }}

                          <template v-slot:action="{ attrs }">
                            <v-btn
                                    color="pink"
                                    text
                                    v-bind="attrs"
                                    @click="snackbar = false"
                            >
                              Close
                            </v-btn>
                          </template>
                        </v-snackbar>
                        <v-dialog v-model="dialogDelete" max-width="500px">
                          <v-card>
                            <v-card-title class="text-h5">Are you sure you want to delete this item?</v-card-title>
                            <v-card-actions>
                              <v-spacer></v-spacer>
                              <v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn>
                              <v-btn color="red darken-1" text @click="deleteItemConfirm">OK</v-btn>
                              <v-spacer></v-spacer>
                            </v-card-actions>
                          </v-card>
                        </v-dialog>
                      </v-toolbar>
                      <v-text-field
                              v-model="search"
                              label="Search (UPPER CASE ONLY)"
                              class="mx-4"
                      ></v-text-field>
                    </template>
                    <template v-slot:item.uploaded="{ item }">
                      <v-switch
                              v-model="item.uploaded"
                      :label="` ${item.uploaded ? '上架' : '下架'}`"
                              disabled
                      ></v-switch>
                    </template>
                    <template v-slot:item.actions="{ item }">
                      <v-icon
                              small
                              class="mr-2"
                              @click="editItem(item)"
                      >
                        mdi-pencil
                      </v-icon>
                      <v-icon
                              small
                              @click="deleteItem(item)"
                      >
                        mdi-delete
                      </v-icon>
                    </template>
                    <template v-slot:item.password="{ item }">
                      <v-btn
                              color="error"
                              @click="openResetDialog(item)"
                      >
                        Reset
                      </v-btn>
                    </template>
                  </v-data-table>
                </template>
              </v-col>
            </v-row>
          </v-container>


        </v-main>

        <!-- 设置栏目 -->
        <v-row justify="center">
          <v-dialog
            v-model="settingDialog"
            fullscreen
            hide-overlay
            transition="dialog-bottom-transition"
          >
            <v-card>
              <v-toolbar
                dark
                color="primary"
              >
                <v-btn
                  icon
                  dark
                  @click="settingDialog = false"
                >
                  <v-icon>mdi-close</v-icon>
                </v-btn>
                <v-toolbar-title>Settings</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-toolbar-items>
                  <v-btn
                    dark
                    text
                    @click="settingDialog = false"
                  >
                    Save
                  </v-btn>
                </v-toolbar-items>
              </v-toolbar>
              <v-list
                three-line
                subheader
              >
                <v-subheader>User Controls</v-subheader>
                <v-list-item>
                  <v-list-item-content>
                    <v-list-item-title>Content filtering</v-list-item-title>
                    <v-list-item-subtitle>Set the content filtering level to restrict apps that can be downloaded</v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
                <v-list-item>
                  <v-list-item-content>
                    <v-list-item-title>Password</v-list-item-title>
                    <v-list-item-subtitle>Require password for purchase or use password to restrict purchase</v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
              </v-list>
              <v-divider></v-divider>
              <v-list
                three-line
                subheader
              >
                <v-subheader>General</v-subheader>
                <v-list-item>
                  <v-list-item-action>
                    <v-checkbox v-model="notifications"></v-checkbox>
                  </v-list-item-action>
                  <v-list-item-content>
                    <v-list-item-title>Notifications</v-list-item-title>
                    <v-list-item-subtitle>Notify me about updates to apps or games that I downloaded</v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
                <v-list-item>
                  <v-list-item-action>
                    <v-checkbox v-model="sound"></v-checkbox>
                  </v-list-item-action>
                  <v-list-item-content>
                    <v-list-item-title>Sound</v-list-item-title>
                    <v-list-item-subtitle>Auto-update apps at any time. Data charges may apply</v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
                <v-list-item>
                  <v-list-item-action>
                    <v-checkbox v-model="widgets"></v-checkbox>
                  </v-list-item-action>
                  <v-list-item-content>
                    <v-list-item-title>Auto-add widgets</v-list-item-title>
                    <v-list-item-subtitle>Automatically add home screen widgets</v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
              </v-list>
            </v-card>
          </v-dialog>
        </v-row>
        <!-- 页脚 -->
        <v-footer padless>
          <v-col class="text-center" cols="12">
            {{ new Date().getFullYear() }} — <strong>MyPetstoreForMerchant</strong>
          </v-col>
        </v-footer>
      </v-app>
    </template>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script src="../js/axios-0.18.0.js"></script>
  <script src="../js/itemManagement.js"></script>
</body>
</html>